<%@page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <!-- 引入favicon.ico网页图标 -->
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/favicon.ico" type="image/x-icon"/>
    <title>睿道商城后台管理</title>

    <!-- Bootstrap -->
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/admin-base.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/admin.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="${pageContext.request.contextPath}/assets/js/jquery-3.4.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/modal.js"></script>
    <style type="text/css">
        .cque-list {
            margin: 10px;
            display: flex;
            flex-direction: column;
        }

        .cque-list-nav {
            margin: 10px;
        }

        .cque-list-content {
            margin: 10px;
        }

        .cque-td {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>

<body>
<div class="cque-window">
    <div class="cque-nav">
        <div class="navbar-header" style="margin-left: 20px">
            <img alt="Brand" height="60px" src="${pageContext.request.contextPath}/assets/images/logo.png">
        </div>
        <h2 style="margin-left: 20px">商城后台管理系统</h2>
    </div>
    <div class="cque-content">
        <div class="cque-side">
            <div class="panel panel-info" style="margin: 0;height: 100%">
                <div class="panel-heading">系统菜单</div>
                <div class="panel-body" style="padding: 0">
                    <div class="list-group">
                        <a href="${pageContext.request.contextPath}/admin/category/list"
                           class="list-group-item">商品类别管理</a>
                        <a href="${pageContext.request.contextPath}/admin/product/list" class="list-group-item">商品管理</a>
                        <a href="${pageContext.request.contextPath}/admin/order/list" class="list-group-item">订单管理</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="cque-main">
            <div class="cque-list">
                <div class="cque-list-nav">
                    <button class="btn btn-default addCategory">添加</button>
                </div>
                <div class="cque-list-content">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th style="text-align: center">序号</th>
                            <th style="text-align: center">编号</th>
                            <th style="text-align: center">名称</th>
                            <th style="text-align: center">操作</th>
                        </tr>
                        </thead>
                        <tbody id="categoryList">
                        <c:forEach items="${categoryList}" var="category" varStatus="status">
                            <tr>
                                <td style="text-align: center">${status.count}</td>
                                <td style="text-align: center">${category.cid}</td>
                                <td style="text-align: center">${category.cname}</td>
                                <td class="cque-td">
                                    <button class="btn btn-default updateCategory" type="button"
                                            onclick="updateUI('${category.cid}')">修改
                                    </button>
                                    <button class="btn btn-default" type="button" onclick="doDelete('${category.cid}')">
                                        删除
                                    </button>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<%--添加模态框--%>
<div class="modal fade" id="addModal" style="display:none;">
    <div class="modal-dialog modal-sm" style="width:460px;">
        <div class="modal-content">
            <div style="height: 300px">
                <div class="modal-header">
                    <button type="button" id="login_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="loginModalLabel" style="font-size: 18px;">添加商品类别</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt" id="box-login">
                        <div id="add_form">
                            <ul>
                                <li class="form-group">
                                    <label for="cida">类别编号：</label>
                                    <input class="form-control" id="cida" maxlength="50" name="cid"
                                           placeholder="请输入类别编号" type="text">
                                </li>
                                <li class="form-group">
                                    <label for="cnamea">类别名称：</label>
                                    <input class="form-control" id="cnamea" name="cname" placeholder="请输入类别名称"
                                           type="text">
                                </li>
                            </ul>
                            <div class="login-box marginB10" style="margin-top: 25px;">
                                <button id="add_btn" type="button" class="btn btn-micv5 btn-block" onclick="doAdd()">
                                    添加
                                </button>
                            </div>
                        </div>

                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<%--修改模态框--%>
<div class="modal fade" id="updateModal" style="display:none;">
    <div class="modal-dialog modal-sm" style="width:460px;">
        <div class="modal-content">
            <div style="height: 300px">
                <div class="modal-header">
                    <button type="button" id="update_close" class="close" data-dismiss="modal"><span
                            aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" style="font-size: 18px;">修改商品类别信息</h4>
                </div>
                <div class="modal-body">
                    <section class="box-login v5-input-txt">
                        <div id="update_form">
                            <ul>
                                <li class="form-group">
                                    <label for="cidu">类别编号：</label>
                                    <input class="form-control" id="cidu" maxlength="50" name="cid" type="text"
                                           readonly="readonly">
                                </li>
                                <li class="form-group">
                                    <label for="cnameu">类别名称：</label>
                                    <input class="form-control" id="cnameu" name="cname" placeholder="请输入类别名称"
                                           type="text">
                                </li>
                            </ul>
                            <div class="login-box marginB10" style="margin-top: 25px;">
                                <button id="update_btn" type="button" class="btn btn-micv5 btn-block" onclick="doUpdate()">
                                    修改
                                </button>
                            </div>
                        </div>

                    </section>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    //添加界面
    function addCategory() {
        $("#addModal").modal("show")
    }

    $(".addCategory").on("click", addCategory), function () {
        var e = [];
        $("#addModal").on("show.bs.modal",
            function () {
                for (var s = 0; e.length > s; s++) e[s] && (e[s].modal("hide"), e[s] = null);
                e.push($(this));
                var o = $(this),
                    a = o.find(".modal-dialog"),
                    t = $('<div style="display:table; width:100%; height:100%;"></div>');
                t.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                    t.children("div").html(a),
                    o.html(t)
            })
    }();

    //添加操作
    function doAdd() {
        var cid = $("#cida").val();
        var cname = $("#cnamea").val();
        if (cid == "" || cid == null) {
            alert("编号不能为空");
            return;
        }
        $.ajax({
            type: "post",
            dataType: "json",
            data: {cid: cid, cname: cname},
            url: "${pageContext.request.contextPath}/admin/category/add",
            success: function (data) {
                /*alert(data.info);
                location.reload();*/
                console.log(data);
                if (data=="添加失败"){
                    alert(data);
                    return;
                }
                alert("添加成功");
                listUI(data);
                $("#addModal").modal('hide');
                $("input").val('');
            },
            error: function () {
                alert("网络超时，请重试");
            }
        });
    }

    //删除操作
    function doDelete(cid) {
        var flag = confirm("确定删除?");
        if (flag) {
            $.ajax({
                type: "post",
                dataType: "json",
                data: {cid: cid},
                url: "${pageContext.request.contextPath}/admin/category/delete",
                success: function (data) {
                    /*alert(data.info);
                    location.reload();*/
                    if (data=="删除失败"){
                        alert(data);
                        return;
                    }
                    alert("删除成功");
                    listUI(data);
                },
                error: function () {
                    alert("网络超时，请重试");
                }
            });
        }
    }

    //修改界面
    function updateUI(cid) {
        var e = [];
        $("#updateModal").on("show.bs.modal",
            function () {
                for (var s = 0; e.length > s; s++) e[s] && (e[s].modal("hide"), e[s] = null);
                e.push($(this));
                var o = $(this),
                    a = o.find(".modal-dialog"),
                    t = $('<div style="display:table; width:100%; height:100%;"></div>');
                t.html('<div style="vertical-align:middle; display:table-cell;"></div>'),
                    t.children("div").html(a),
                    o.html(t)
            }).modal("show");
        $.ajax({
            type: "post",
            dataType: "json",
            data: {cid: cid},
            url: "${pageContext.request.contextPath}/admin/category/findOne",
            success: function (data) {
                $("#cidu").val(data.cid);
                $("#cnameu").val(data.cname);
            },
            error: function () {
                alert("网络超时，请重试");
            }
        });
    }

    //修改操作
    function doUpdate() {
        var cid = $("#cidu").val();
        var cname = $("#cnameu").val();
        if (cid == "" || cid == null) {
            alert("编号不能为空");
            return;
        }
        $.ajax({
            type: "post",
            dataType: "json",
            data: {cid: cid, cname: cname},
            url: "${pageContext.request.contextPath}/admin/category/update",
            success: function (data) {
                /*console.log(data);
                alert(data.info);
                location.reload();*/
                if (data=="修改失败"){
                    alert(data);
                    return;
                }
                alert("修改成功");
                listUI(data);
                $("#updateModal").modal('hide');
            },
            error: function () {
                alert("网络超时，请重试");
            }
        });
    }


    function listUI(data) {
        var str="";
        var count=1;
        for (var i=0;i<data.length;i++){
            str+=`<tr>
                                <td style="text-align: center">\${count}</td>
                                <td style="text-align: center">\${data[i].cid}</td>
                                <td style="text-align: center">\${data[i].cname}</td>
                                <td class="cque-td">
                                    <button class="btn btn-default updateCategory" type="button"
                                            onclick="updateUI('\${data[i].cid}')">修改
                                    </button>
                                    <button class="btn btn-default" type="button" onclick="doDelete('\${data[i].cid}')">
                                        删除
                                    </button>
                                </td>
                            </tr>`;
            count++;
        }
        $("#categoryList").html(str);
    }
</script>
</body>
</html>